class PageLoad extends HTMLElement {
  constructor() {
    super();
    if (themeConfig.global.page_load_open) {
      let imgUrl = themeConfig.global.page_load_image?.src || '';
      let imgAlt = themeConfig.global.page_load_image?.alt != '' ? themeConfig.global.page_load_image.alt : 'Loading Icon';

      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
                <style>
                #loading {
                    position: fixed;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    background: #fff;
                    z-index: 999999999;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .spinner-container {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
                .loading-icon {
                    max-width: 56px;
                    position: absolute;
                }
                .spinner {
                    width: 96px;
                    height: 96px;
                    border: 4px solid #F6F6F6;
                    border-top: 4px solid var(--main_button_bg);
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                }
                @keyframes spin {
                    100% { transform: rotate(360deg); }
                }
                </style>
                <div id="loading">
                    <div class="spinner-container">
                        ${imgUrl != '' ? `<img src="${imgUrl}" alt="${imgAlt}" class="loading-icon">` : ''}
                        <div class="spinner"></div>
                    </div>
                </div>
                
            `;
      document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
          this.remove();
        }, 1000);
      });
    } else {
      this.remove();
    }
  }
}

customElements.define('page-load', PageLoad);
